<template>
  <div class="list">
    <div class="list_left">
      <ul>
        <li v-cloak v-for="item,idx in listleftName" :class="{leftact: listleftIdx==idx}" @click="leftHandle(idx,item.id)">{{item.name}}</li>
      </ul>
    </div>
    <div class="list_right" :style="{'min-height':winHeight + 'px'}">
      <transition-group name='tmpAct' tag="div" style="hright:100%" mode="out-in">
        <tmp v-for="item,idx in listleftName" v-if="listleftIdx == idx" :parentobj="listDatason" :parentname='listleftName' :idx='item.id' :key='item.id'></tmp>
      </transition-group>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import tmp from './listname.vue'
import axios from 'axios'
export default {
  data () {
    return {
      winHeight: '',
      allData: '',
      listDatason: '',
      listleftName: '',
      listleftIdx: 0,
      listleftParent: 0,
      parentobj: '',
      parentname: ''
    }
  },
  methods: {
    http (url, cid, page, pagesize, callback) {
      axios.post('/api/' + url).then(e => {
      })
    },
    goodsCategoryData (data) {
      this.allData = data
      this.listDatason = data.filter(e => e.parent != 0)
      this.listleftName = data.filter(e => e.parent == 0)
      // console.log(this.listDatason)
    },
    leftHandle (idx, id) {
      // console.log(id)
      var objname = this.allData.filter(e => e.id == id)
      // console.log(objname)
      var obj = this.listDatason.filter(e => e.parent == id)
      // console.log(obj)
      this.parentobj = obj
      this.parentname = objname[0]
      this.listleftParent = id
      // console.log(this.listleftParent)
      this.listleftIdx = idx
    }
  },
  created () {
    this.winHeight = $(window).height()
    // console.log($(window).height())
    var urls = 'goodsCategory' + '/level/' + 1
    axios.post('/api/' + urls).then(e => {
      this.goodsCategoryData(e.data)
      this.leftHandle(0, 1)
    })
  },
  components: {
    tmp
  }
}
</script>

<style>
.tmpAct-enter{
  transform: translateY(12rem);
  position: absolute;
  left: 50%;
  margin-left: -2.7rem;
}
.tmpAct-leave-to{
  position: absolute;
  left: 50%;
  margin-left: -2.7rem;
  transform: translateY(-10rem);
}
.tmpAct-enter-to,.tmpAct-leave{
  transform: translateY(0rem);
}
.tmpAct-enter-active,.tmpAct-leave-active{
  transition: transform .6s ease;
}
[v-cloak] {
  display: none;
}
.list{
  background-color: #ffffff;
}
.list_left{
  height: 100%;
  width: 1.5rem;
  position: fixed;
  left: 0;
  /* top: 0.8rem; */
  border-right: 1px solid #eeeeee;
  z-index: 1;
}
.list_right{
  width: 6rem;
  /* height: 10rem; */
  min-height: 100%;
  background-color: #ffffff;
  margin-left: 1.5rem;
  /* overflow: hidden; */
  position: relative;
}
.list_left ul{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list_left ul li{
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.28rem;
  color: #222222;
  text-align: center;
}
.leftact{
  color:#f56d02 !important;
  border-left: 0.04rem solid #f56d02;
  box-sizing: border-box;
}
</style>
